<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>组织中心</el-breadcrumb-item>
        <el-breadcrumb-item>子平台管理</el-breadcrumb-item>
        <el-breadcrumb-item>子平台列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--  -->
    <div class="toolbar">
      <el-form :inline="true" :model="dataForm" :size="size" ref="dataForm">
        <el-row class="search-input">
          <el-form-item label="子平台编号：" prop="id">
            <el-input clearable v-model="dataForm.id"></el-input>
          </el-form-item>
          <el-form-item label="子平台名称：" prop="childName">
            <el-input clearable v-model="dataForm.childName"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="legalPersonName">
            <el-input clearable v-model="dataForm.legalPersonName"></el-input>
          </el-form-item>
          <el-form-item label="联系手机：" prop="legalPersonPhone">
            <el-input clearable v-model="dataForm.legalPersonPhone"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="childStatus">
            <el-select v-model="dataForm.childStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in childStatusList"
                :key="item.code"
                :label="item.message"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row  class="search-button">
          <el-form-item>
            <kt-button
              :label="'搜索'"
              icon="el-icon-search"
              type="primary"
              @click="queryPage"
            />
            <kt-button
              :label="'添加'"
              type="primary"
              @click="add"
              :disabled="deptType == '1'"
            perms="sys:child:add"/>
          </el-form-item>
        </el-row>
      </el-form>

      <!-- 表格部分 -->
      <el-table :data="tableData" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554','text-align': 'center'}"
        :highlight-current-row="true"
        :max-height="1500"
        :size="'mini'"
        border
        style="width: 100%">
        <el-table-column align="center" label="子平台编号" width="160" element-loading-text="请给我点时间！">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="子平台名称">
          <template slot-scope="scope">
            <span>{{ scope.row.childName}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="组织级别">
          <template slot-scope="scope">
            <span>子平台</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="上级组织">
          <template slot-scope="scope">
            <span>{{ scope.row.parentDept}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="子平台负责人">
          <template slot-scope="scope">
            <span>{{ scope.row.legalPersonName}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="负责人手机">
          <template slot-scope="scope">
            <span>{{ scope.row.legalPersonPhone}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="状态" >
          <template slot-scope="scope">
              <span>{{ scope.row.childStatus == '0' ? '禁用' :'启用'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="290">
          <template slot-scope="scope">
            <kt-button @click="edit(scope.row)" type="text"  label="编辑" perms="sys:child:edit"></kt-button>
            <kt-button v-if="scope.row.childStatus == '0'" @click="updateStatus(scope.row.id, 1, '启用')" type="text" label="启用" perms="sys:child:status"></kt-button>
            <kt-button v-if="scope.row.childStatus == '1'" @click="updateStatus(scope.row.id, 0, '停用')" type="text" label="停用" perms="sys:child:status"></kt-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页栏-->
      <div class="toolbar t_r" >
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="dataForm.start"
          :page-size="dataForm.limit"
          :total="totalSize"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      class="el-dialog-style"
      :title="editOperate?'编辑':'新增'"
      :visible.sync="editDialogVisible">
      <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="180px">
        <!-- <el-row class="search-input"> -->
          <el-form-item label="子平台编号：" prop="id" v-if="editOperate == true" class="mb30">
              <span class="childPlatNo">{{ editForm.id}}</span>
          </el-form-item>
          <el-form-item  required label="子平台名称：" prop="childName" class="mb30">
            <el-input clearable type="text" v-model="editForm.childName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  required label="组织级别：" prop="deptType" class="mb30">
            <el-input clearable type="text" value="子平台" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item  required label="上级组织：" prop="parentDept" class="mb30">
            <el-input clearable type="text" v-model="editForm.parentDept" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item  required label="子平台负责人：" prop="legalPersonName" class="mb30">
            <el-input clearable type="text" v-model="editForm.legalPersonName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  required label="负责人手机：" prop="legalPersonPhone" class="mb30">
            <el-input clearable type="text" v-model="editForm.legalPersonPhone" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      KtButton
    },
    data() {
      return {
        dataForm:{
          id: null,
          childName: null,
          deptType: null,
          legalPersonName: null,
          legalPersonPhone: null,
          childStatus: null,
          start: 1,
          limit: 10
        },
        editForm:{
          id: null,
          childName: null,
          deptType: null,
          parentDept: null,
          legalPersonName: null,
          legalPersonPhone: null
        },
        editFormRules: {
          childName: [
            { required: true, message: "名称不能为空", trigger: "blur" }
          ]
        },
        editOperate: null, //编辑true或者添加false
        totalSize: 0,
        tableData: [],
        childStatusList: [
          {code:1, message:"启用"},
          {code:0, message:"停用"}
        ],
        editDialogVisible: false,
        size: 'small',
        align: 'center',
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
      }
    },
    methods: {

      queryPage(){
        let _this = this;
        this.utils.request.childQueryPage(this.dataForm, function (res) {
          if(res.code == '0000'){
            _this.tableData = res.data.rows;
            _this.totalSize = res.data.total;
          }
        });
      },
      add(){
        this.editOperate = false;
        this.editDialogVisible = true;
        this.editForm.id = null;
        this.editForm.childName = null;
        this.editForm.legalPersonName = null;
        this.editForm.legalPersonPhone = null;
        this.editForm.deptType = 1;
        this.editForm.parentDept = '卡奥斯';
      },
      edit(row){
        this.editOperate = true;
        this.editDialogVisible = true;
        this.editForm = row;
      },
      editSubmit() {
        let _this = this;
        if (this.editOperate == true) {
          this.$refs.editForm.validate(valid => {
            if (valid) {
              this.utils.request.childEdit(this.editForm, function (res) {
                if (res.code == '0000') {
                  _this.queryPage();
                  _this.editDialogVisible = false;
                }
              });
            }
          });
        }else {
          this.$refs.editForm.validate(valid => {
            if (valid) {
              this.utils.request.childAdd(this.editForm, function (res) {
                if (res.code == '0000') {
                  _this.queryPage();
                  _this.editDialogVisible = false;
                }
              });
            }
          });
        }
      },

      currentChange(start){
        this.dataForm.start = start;
        this.queryPage();
      },
      sizeChange(limit){
        this.dataForm.start = 1;
        this.dataForm.limit = limit;
        this.queryPage();
      },

      updateStatus(id, childStatus, message){
        let _this = this;
        let param = {};
        param.id = id;
        param.childStatus = childStatus;
        this.$confirm('<strong><spane style="color: red">设置平台'+ message + '后，本级及其下级商家和店铺的账号将同时被' + message + '</spane></strong>', '你确定要'+ message +'该平台吗？', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning',
          center: true
        }).then(() => {
          this.utils.request.childUpdateStatus(param,function (res) {
            if(res.code == '0000'){
              _this.queryPage();
              _this.$message({type: 'success',message: message + '成功!'});
            }
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },

    },
    mounted() {
      this.queryPage();
    }
  }
</script>
<style scoped lang="scss">
  .type {
    display: flex;
    align-items: center;
  }
  .type p {
    text-align: right;
    margin-right: 20px;
    width: 120px;
  }
  .childPlatNo{
    display: inline-block;
    height:32px;
    line-height: 32px;
    width: auto;
  }
</style>
